<script setup lang="ts">
import { onUnmounted, ref, watch } from 'vue'
import { localGet, mlog } from '@/api'
import { SvgIcon } from '@/components/common'
import { homeStore } from '@/store'
interface Props { chat: Chat.Chat;isW?: boolean }
const props = defineProps<Props>()
const st = ref({ isLoad: 0, bolb: '' })
const player = new window.Audio()
const mybolb = ref<Blob>()

const load = async () => {
  if (!props.chat.opt?.lkey)
    return
  const blob = await localGet(props.chat.opt?.lkey) as Blob
  // st.value.bolb= blob;
  mybolb.value = blob
  player.src = URL.createObjectURL(blob)
  player.addEventListener('ended', () => {
    st.value.isLoad = 0
  })
  player.addEventListener('play', () => {
    st.value.isLoad = 1
  })
  player.addEventListener('pause', () => {
    st.value.isLoad = 2
  })
  player.addEventListener('timeupdate', (e) => {
    // 音频播放位置变化时的操作
    mlog('timeupdate', player.currentTime, player.duration)
  })
  player.load()
}
const go = () => {
  if (st.value.isLoad == 1)
    player.pause()
  else player.play()
}
const getWidth = () => {
  if (props.isW)
    return '100%'
  let w = 0.3
  if (props.chat.opt?.duration) {
    if (props.chat.opt?.duration > 60)
      w = 1
    else w = props.chat.opt?.duration / 45
    w = 0.3 + w
    if (w > 1)
      w = 1
  }
  return `${w * 280}px`
}
const download = () => {
  if (!mybolb.value || !props.chat.opt?.lkey)
    return
  const a = document.createElement('a')
  a.href = URL.createObjectURL(mybolb.value)
  a.download = `${props.chat.model}_${props.chat.opt?.lkey?.replace(/\:/ig, '-')}.mp3`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
watch(() => homeStore.myData.act, (n) => {
  const data: any = homeStore.myData.actData
  mlog('act', n, data)
  if (n == 'playtts' && props.chat.opt?.lkey == data.saveID)
    player.play()
})
onUnmounted(() => player.pause())
load()
</script>

<template>
  <div class="markdown-body" :class="[props.isW ? 'border-t border-neutral-400/25 ' : '']" style="padding-top: 5px; margin-top: 5px;">
    <div class=" flex justify-between items-center " :style="{ width: getWidth() }">
      <div class="flex justify-start items-center flex-1" @click="go">
        <span v-html="chat.opt?.duration?.toFixed(2)" />s
        <div class=" rotate-90  cursor-pointer">
          <SvgIcon v-if="st.isLoad == 1" icon="svg-spinners:wifi" />
          <SvgIcon v-else icon="mdi:wifi" />
        </div>
      </div>
      <div class="text-blue-500 cursor-pointer" @click="download">
        <SvgIcon icon="ri:download-2-fill" />
      </div>
    </div>
  </div>
</template>
